import * as echarts from "echarts";
import JingNingGeoJson from "../map/JingNing.json";
import { ref } from "vue";
import svg from "../map/mapSvg";

echarts.registerMap("JN", JingNingGeoJson);
echarts.registerMap("JNBG", { svg });
export default function () {
    const options = ref({}); // type : echarts.EChartsOption
    options.value = {
        // 下方阴影
        geo: {
            map: "JNBG",
            silent: true,
            roam: false,
            zoom: 1.2,
            top: 62,
            // left:80,
            aspectScale: 1,

            itemStyle: {
                areaColor: "rgba(4, 46, 98, 0.8)",
                shadowColor: "rgba(9, 226, 248, 1)",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                borderColor: "rgb(0,0,0,0)",
                borderWidth: 0,
                opacity: 0.5,
            },
            // left: 10,
            // right: 10,
            // map: "JNBG",
            // itemStyle: {
            //   borderWidth: 0,
            // },
            // emphasis: {
            //   itemStyle: {
            //     areaColor: "#ff0000",
            //   },
            //   label: {
            //     show: false,
            //   },
            // },
            // regions: [
            //   {
            //     name: "map12",
            //     itemStyle: {
            //       areaColor: "red",
            //       color: "red",
            //     },
            //   },
            // ],
        },
        series: [
            // 上方可交互地图
            // {
            //   type: "map",
            //   map: "JN",
            //   selectedMode: false,
            //   aspectScale: 1,
            //   zoom: 1.1,
            //   silent: true,
            //   label: {
            //     show: true,
            //     color: "#fff",
            //     formatter: (params: any) => {
            //       // console.log(params);
            //       return `{name|${params.name}}`;
            //     },
            //     rich: {
            //       name: {
            //         fontSize: 12,
            //         fontWeight: 400,
            //       },
            //     },
            //   },
            //   itemStyle: {
            //     borderColor: "rgb(9, 226, 248, .7)",
            //     borderWidth: 1,
            //     areaColor: "rgb(12,46,98,0.5)",
            //     opacity: 1,
            //   },
            //   emphasis: {
            //     label: {
            //       show: true,
            //       color: "#fff",
            //     },
            //     itemStyle: {
            //       borderColor: "rgb(89,196,255, 1)",
            //       borderWidth: 1,
            //       areaColor: "rgb(12,46,98,0.5)",
            //       shadowColor: "rgba(135, 215, 255, 1)",
            //       shadowBlur: 30,
            //       opacity: 1,
            //     },
            //   },
            // },
            //   {
            //     type: "scatter",
            //     coordinateSystem: "geo",
            //     geoIndex: 0,
            //     zlevel: 1,
            //     symbol: "image://" + iconPowerPlant,
            //     symbolSize: [26, 30],
            //     itemStyle: {
            //       color: "rgb(22,255,255, 1)",
            //       opacity: 1,
            //     },
            //     data: thermalPowerData.value.map((i: any, index: any) => ({
            //       value: [i.latitude, i.longitude],
            //       ...i,
            //     })),
            //   },
            /*powerPlantData.map((i,index) => ({
                      value: [i.longitude, i.latitude],
                      electricityGenerationHourCount:powerStationMapData.value[index].electricityGenerationHourCount,
                      ...i,
                  })),*/
            //   {
            //     type: "scatter",
            //     coordinateSystem: "geo",
            //     geoIndex: 0,
            //     zlevel: 1,
            //     symbol: "image://" + iconPv,
            //     symbolSize: [24, 21.69],
            //     itemStyle: {
            //       color: "rgb(22,255,255, 1)",
            //       opacity: 1,
            //     },
            //     data: photovoltaicData.value
            //       .map((i: any) => ({
            //         ...i,
            //         value: [i.latitude, i.longitude, i.voltageLevel],
            //       }))
            //       .filter((i: any, index: any) => index < 3),
            //   },
        ],
    };
    return {
        options,
    };

}